<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .buttonGroup {
            margin-top: 20px;
        }

        .active {
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div id="demo" class="wrap">
        <h3 id="title">批量操作元素</h3>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span>06</span></li>
        </ul>
    </div>
</body>
<script>
    // $(".first").click(function () {
    //     alert($(this).index());
    // })

    // $(".first").on("click", function () {
    //     $(this).css({ background: "red" });
    // })

    // 普通用法  => on() off()

    //  on()  添加事件监听
    // $(ele).on(eventType,data,callback)
    // ele        绑定事件的元素
    // eventType  绑定事件的类型
    // data       (可选参数)当一个事件被触发时要传递event.data给事件处理函数。
    // callback   事件触发时的回调函数

    // $(".first").on("click", { a: 1, b: 2 }, function (e) {
    //     // jquery中的事件对象 => 是对原始事件对象二次处理之后的生成的(不影响使用)
    //     console.log(e.data);
    //     // e.stopPropagation();
    //     // e.preventDefault();
    //     $(this).css({ background: "red" });
    // })

    function clickHandler_1(e) {
        $(this).css({ background: "red" });
    }
    function clickHandler_2(e) {
        alert($(this).index());
    }


    $(".first").on("click", { a: 1, b: 2 }, clickHandler_1);
    $(".first").click(clickHandler_2);

    $(".first").on("mouseenter", function (e) {
        $(this).text("鼠标移入");
    }).on("mouseleave", function (e) {
        $(this).text("鼠标移出");
    })


    // off()  删除事件监听
    // $(ele).off(eventType,callback)
    // ele        绑定事件的元素
    // eventType  绑定事件的类型
    // callback   事件触发时的回调函数
    // 注意: off()  删除事件监听对应回调函数清除

    // 移除first的点击事件     => 对应回调函数清除  
    // $(".first").off("click", clickHandler_1);
    // $(".first").off("click", clickHandler_2);

    // [{ type: click, fn: clickHandler_1 },{ type: click, fn: clickHandler_2 }]
    // 移除first的点击事件     => 对应事件类型清除
    // $(".first").off("click");

    // 移除first的所有事件
    // $(".first").off();





</script>

</html>